<template>
	<view>
		<base-wrapper-scroll @onPushRefresh="onPushRefresh" :activeTabName="'category'"
			:loadmoreStatus="status">
			<up-cell :icon="item.icon" :title="item.title" value="查看" :label="item.info" isLink
				url="/subPackages/test/demo" v-for="(item, index) in list" :key="index"></up-cell>
		</base-wrapper-scroll>
	</view>
</template>

<script setup>
	import {
		ref,
		computed
	} from "vue";

	// 创建响应式数据
	const status = ref(
		computed(() => {
			if (list.value.length > 30) {
				return "loadmore";
			} else {
				return "nomore";
			}
		})
	);

	const list = ref([{
			id: 1,
			icon: "integral-fill",
			title: "分类1",
			info: "介绍1",
		},
		{
			id: 2,
			icon: "integral-fill",
			title: "分类2",
			info: "介绍2",
		},
		{
			id: 3,
			icon: "integral-fill",
			title: "分类3",
			info: "介绍3",
		},
		{
			id: 4,
			icon: "integral-fill",
			title: "分类4",
			info: "介绍4",
		},
		{
			id: 5,
			icon: "integral-fill",
			title: "分类5",
			info: "介绍5",
		},
	]);
	const page = ref(0);

	function onPushRefresh() {
		if (list.value.length < 30) {
			return;
		}
		status.value = "loading";
		page.value++;
		setTimeout(() => {
			list.value += 1;
			status.value = "loadmore";
		}, 1000);
	}
</script>

<style lang="scss" scoped>
	.item {
		padding: 24rpx 0;
		color: $u-content-color;
		font-size: 28rpx;
	}
</style>